﻿@page "/tables"

<h3>Table 表格</h3>

<h4>用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。</h4>

<Block Title="基础表格" Introduction="基础的表格展示用法。" CodeFile="table.1.html">
    <p>
        表格组件 <code>TableColumns</code> 模板中的字段采用的是根据绑定模型的 <code>DisplayName</code> 标签值来自动显示的，如果要自定义显示名称请设置 <code>Text</code> 属性
    </p>
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem" Items="@Items.Take(3)">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Text="自定义列名1" />
            <TableColumn @bind-Field="@context.Name" Text="自定义列名2" />
            <TableColumn @bind-Field="@context.Address" Text="自定义列名3" />
        </TableColumns>
    </Table>
</Block>

<Block Title="带斑马纹表格" Introduction="使用带斑马纹的表格，可以更容易区分出不同行的数据。设置 <code>IsStriped=true</code> 即可" CodeFile="table.2.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem" Items="@Items.Take(3)" IsStriped="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="带边框表格" Introduction="通过设置 <code>IsBordered</code> 属性，增加表格表框效果" CodeFile="table.3.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem" Items="@Items.Take(3)" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="带选择列表格" Introduction="通过设置 <code>ShowCheckbox=true</code> 增加表格第一列为选择列" CodeFile="table.4.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem" Items="@Items.Take(3)" ShowCheckbox="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="带显示文字的选择列表格" Introduction="通过设置 <code>ShowCheckboxText=true</code> 表格第一列显示文字为选择" CodeFile="table.5.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem" Items="@Items.Take(3)" ShowCheckbox="true" ShowCheckboxText="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="选择框列" Introduction="<code>RowTemplate</code> 内部组件 <code>TableCell</code> 设置 <code>Checkbox</code> 并设置相关数据绑定即可，本示例中通过数据绑定将选择框组件与值进行绑定" CodeFile="table.6.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem" Items="@Items.Take(3)">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Complete">
                <Template Context="item">
                    <Checkbox TItem="bool" Value="@(((BindItem)item).Complete)" IsDisabled="true"></Checkbox>
                </Template>
            </TableColumn>
        </TableColumns>
    </Table>
</Block>

<Block Title="分页表格" Introduction="设置 <code>IsPagination</code> 显示分页组件" CodeFile="table.7.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem"
           IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="带 Toolbar 的表格" Introduction="设置 <code>ShowToolbar</code> 显示工具条组件" CodeFile="table.8.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem" Items="@Items.Take(4)"
           IsBordered="true"
           ShowCheckbox="true" ShowToolbar="true" ShowDefaultButtons="false">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="带查询的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件" CodeFile="table.9.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem"
           IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
           ShowToolbar="true" ShowSearch="true" ShowAdvancedSearch="false" ShowDefaultButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="固定表头的表格" Introduction="设置 <code>Height=200</code> 固定表头" CodeFile="table.11.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem" Items="@Items.Take(10)" Height="200" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="带分页数据固定表头的表格" Introduction="设置 <code>Height=200</code> 固定表头，由于默认每页仅显示 <code>2</code> 行数据所以高度采用自适应方式，当每页显示数据为 <code>4</code> 行时高度超出设置值 <code>200</code> 后，Table 组件出现纵向滚动条" CodeFile="table.12.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem" IsBordered="true" ShowCheckbox="true"
           PageItemsSource="@PageItemsSource" IsPagination="true" OnQueryAsync="@OnQueryAsync" Height="200">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>

<Block Title="具有单表维护功能的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件" CodeFile="table.10.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowSearch="true" ShowCheckbox="true" ShowExtendButtons="true"
           AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
           SearchModel="@SearchModel"
           OnQueryAsync="@OnQueryAsync" OnResetSearchAsync="@OnResetSearchAsync"
           OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
        </TableColumns>
        <EditTemplate>
            <div class="form-inline">
                <div class="row">
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Name" placeholder="不可为空，50字以内" maxlength="50">
                            <RequiredValidator />
                            <StringLengthValidator Length="50" />
                        </BootstrapInput>
                    </div>
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Address" placeholder="不可为空，50字以内" maxlength="50">
                            <RequiredValidator />
                            <StringLengthValidator Length="50" />
                        </BootstrapInput>
                    </div>
                </div>
            </div>
        </EditTemplate>
        <SearchTemplate>
            <div class="form-inline">
                <div class="row">
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Name" placeholder="不可为空，50字以内" maxlength="50" />
                    </div>
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Address" placeholder="不可为空，50字以内" maxlength="50" />
                    </div>
                </div>
            </div>
        </SearchTemplate>
    </Table>
</Block>

<Block Title="自定义扩展按钮" Introduction="设置 <code>TableToolbarTemplate</code> 模板添加自定义扩展按钮" CodeFile="table.13.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowDefaultButtons="false" ShowSearch="true" ShowCheckbox="true" ShowExtendButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableToolbarTemplate>
            <TableToolbarButton Color="Color.Primary" ButtonIcon="fa fa-fw fa-download" ButtonText="下载" />
        </TableToolbarTemplate>
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Sortable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
        </TableColumns>
    </Table>
</Block>

<Block Title="自定义各列宽度" Introduction="通过设置 <code>TableColumn</code> <code>Width</code> 属性，来控制列宽度，行内按钮操作列宽度由 <code>ExtendButtonColumnWidth</code> 属性控制" CodeFile="table.14.html">
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowDefaultButtons="false" ShowSearch="false" ShowCheckbox="true"
           ShowExtendButtons="true" ExtendButtonColumnWidth="240"
           OnQueryAsync="@OnQueryAsync">
        <TableToolbarTemplate>
            <TableToolbarButton Color="Color.Primary" ButtonIcon="fa fa-fw fa-download" ButtonText="下载" />
        </TableToolbarTemplate>
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Sortable="true" Width="150" />
            <TableColumn @bind-Field="@context.Name" Sortable="true" Width="100" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
        </TableColumns>
        <RowButtonTemplate>
            <TableCellButton Size="Size.ExtraSmall" Color="Color.Primary" TItem="BootstrapBlazor.Shared.Pages.BindItem" Item="@context">
                <i class='fa fa-edit'></i>
                <span>明细</span>
            </TableCellButton>
            <TableCellButton Size="Size.ExtraSmall" Color="Color.Success" TItem="BootstrapBlazor.Shared.Pages.BindItem" Item="@context">
                <i class='fa fa-edit'></i>
                <span>编辑</span>
            </TableCellButton>
            <TableCellButton Size="Size.ExtraSmall" Color="Color.Warning" TItem="BootstrapBlazor.Shared.Pages.BindItem" Item="@context">
                <i class='fa fa-edit'></i>
                <span>权限</span>
            </TableCellButton>
            <TableCellButton Size="Size.ExtraSmall" Color="Color.Danger" TItem="BootstrapBlazor.Shared.Pages.BindItem" Item="@context">
                <i class='fa fa-edit'></i>
                <span>审批</span>
            </TableCellButton>
        </RowButtonTemplate>
    </Table>
</Block>

<Block Title="可过滤数据的表格" Introduction="设置 <code>TableColumn</code> 列的 <code>Filterable</code> 属性，控制列头是否开启数据过滤功能" CodeFile="table.15.html">
    <p>
        <code>Filterable</code> 目前支持两种应用方式：
        <ul>
            <li>查询方法参数中的 Filters 是过滤条件，数据库查询数据时可以通过此属性自行进行数据过滤</li>
            <li>无感使用，正常查询数据，对过滤不进行任何处理，组件内部将根据 Filter 进行内部处理</li>
        </ul>
        <div>
            如果外部已经进行了过滤时请设置 <code>QueryData&lt;TItem&gt;</code> 参数的 <code>IsFiltered</code> 属性值为 <code>true</code>
        </div>
        <div>
            本示例中共显示五列，分别为 <code>DateTime、string、bool、int</code> 类型，弹出过滤框也分别不同
        </div>
        <div>
            各列可分别设置过滤条件，各列之间过滤条件为 <code>And</code> 并且的关系
        </div>
        <Alert ShowBar="true" Color="Color.Info" class="mt-3">开启过滤功能仅需要设置 <code>TableColumn</code> 的 <code>Filterable</code> 值为 <code>true</code>，无需额外任何代码</Alert>
    </p>
    <Table TItem="BootstrapBlazor.Shared.Pages.BindItem"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="false" ShowCheckbox="true" ShowExtendButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="150" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Name" Width="100" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" Filterable="true" />
            <TableColumn @bind-Field="@context.Complete" Width="100" Filterable="true">
                <Template Context="item">
                    <Checkbox TItem="bool" Value="@(((BindItem)item).Complete)" IsDisabled="true"></Checkbox>
                </Template>
            </TableColumn>
            <TableColumn @bind-Field="@context.Count" Width="100" Sortable="true" Filterable="true" />
        </TableColumns>
    </Table>
</Block>

<Toast></Toast>

<PopoverConfirm></PopoverConfirm>

<AttributeTable Items="GetAttributes()"></AttributeTable>

<MethodTable Items="GetMethods()"></MethodTable>
